<template>
  <div class="swiper_size">
    <swiper :options="swiperOption" >
      <!-- slides -->
      <swiper-slide v-for="item in swiperList" :key="item.id"><img :src="item.imgUrl" alt="去哪儿门票" ></swiper-slide>
      <!-- Optional controls -->
      <div class="swiper-pagination"  slot="pagination"></div>
    </swiper>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        swiperOption: {
          pagination:{
            el:".swiper-pagination"
          },
          // loop : true,
          autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
          },
        }
      }
    },
    props:["swiperList"]
  }
</script>
<style scoped>
  .swiper_size{
    width:100%;
    height: 0;
    padding-bottom: 26.67%;
    background: #333;
    margin-top: .44rem;
  }
  .swiper_size img{
    width:100%;
    height:100%;
  }
  .swiper_size >>> .swiper-pagination-bullet{
    background: #fff;
  }
</style>
